<template>
  <div class="main">
    <div>
      <el-radio-group v-model="selectType" @change="typeChange">
        <el-radio label="posi">按岗位</el-radio>
          <el-radio label="depart">按部门</el-radio>
        <el-radio label="user">按人员</el-radio>
      </el-radio-group>
    </div>
    <div class="selector" >
      <div v-if="selectType==='posi'" class="chose-user">
        <div class="lefttree">
          <el-tree
            filter
            :data="positionData"
            node-key="id"
            ref="tree1"
            show-checkbox
            default-expand-all
            highlight-current
            :check-on-click-node="true"
            @check="selectChange"
            :check-strictly="true"
            :default-checked-keys="selectPositions"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node }">
              <span></span>
              <span class="no-wrap">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="center-wrapper">
          <div class="iconfont">&#xe603;</div>
          <div class="iconfont">&#xe603;</div>
        </div>
        <div class="rightcontent">
          <div style="padding-left: 30px;">
            <div v-for="(user, index) in selectPositions" :key="index" class="user-item">
              <div class="username">
                {{user.label}}
              </div>
              <div class="bt-delete">
                <el-button type="text" icon="el-icon-circle-close" @click="deletePosition(user)"></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="selectType==='depart'" class="chose-user">
        <div class="lefttree">
          <el-tree
            filter
            :data="departData"
            node-key="id"
            ref="tree2"
            show-checkbox
            default-expand-all
            highlight-current
            :check-on-click-node="true"
            @check="selectChange"
            :check-strictly="true"
            :default-checked-keys="selectDeparts"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node }">
              <span></span>
              <span class="no-wrap">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="center-wrapper">
          <div class="iconfont">&#xe603;</div>
          <div class="iconfont">&#xe603;</div>
        </div>
        <div class="rightcontent">
          <div style="padding-left: 30px;">
            <div v-for="(user, index) in selectDeparts" :key="index" class="user-item">
              <div class="username">
                {{user.label}}
              </div>
              <div class="bt-delete">
                <el-button type="text" icon="el-icon-circle-close" @click="deleteDepart(user)"></el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-else-if="selectType==='user'" class="chose-user">
        <div class="lefttree">
          <el-tree
            filter
            :data="usersData"
            node-key="id"
            ref="tree3"
            show-checkbox
            default-expand-all
            highlight-current
            :check-on-click-node="true"
            @check="selectChange"
            :check-strictly="true"
            :default-checked-keys="selectedUsers"
            :expand-on-click-node="false">
            <span class="custom-tree-node" slot-scope="{ node }">
              <span></span>
              <span class="no-wrap">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="center-wrapper">
          <div class="iconfont">&#xe603;</div>
          <div class="iconfont">&#xe603;</div>
        </div>
        <div class="rightcontent">
          <div style="    padding-left: 30px;">
            <div v-for="(user, index) in selectedUsers" :key="index" class="user-item">
                <div class="username">
                  {{user.label}}
                </div>
                <div class="bt-delete">
                  <el-button type="text" icon="el-icon-circle-close" @click="deleteUser(user)"></el-button>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: center">
      <el-button style="width: 120px;height: 40px;line-height: 0" plain type="primary" class="bt-long" @click="$emit('cancel')">取消</el-button>
      <el-button style="width: 120px;height: 40px;line-height: 0" type="primary" class="bt-long" @click="saveRoleUsers">保存</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ChosePosition',
  props: {
    userData: {
      type: Array,
      default () {
        return []
      }
    },
    t: {
      type: String,
      default () {
        return ''
      }
    },
    userType: {
      type: String,
      default () {
        return 'depart'
      }
    }
  },
  data () {
    return {
      selectedUsers: [],
      selectPositions: [],
      selectDeparts: [],
      currRole: {},
      positionData: [],
      departData: [],
      usersData: [],
      leftlist: [],
      settinglist: [],
      currUserList: [],
      select_left_menus: [],
      select_menus: [],
      selectType: this.userType
    }
  },
  watch: {
    userData (val) {
      this.getInfo()
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      var othis = this
      this.$axios({
        url: `${this.medEventApi}/api/getpud`,
        method: 'get'
      }).then(res => {
        if (res.data.r === 0) {
          othis.positionData = res.data.positions
          othis.departData = res.data.departs
          othis.usersData = res.data.users
          othis.selectedUsers = []

          setTimeout(function () {
            if (othis.userType === 'depart') {
              othis.userData.forEach(function (item) {
                othis.selectDeparts.push({id: item.depart_id, label: item.depart_name})
              })
              othis.$refs.tree2.setCheckedNodes(othis.selectDeparts)
            } else if (othis.userType === 'posi') {
              othis.userData.forEach(function (item) {
                othis.selectPositions.push({id: item.id, label: item.position_name})
              })
              othis.$refs.tree1.setCheckedNodes(othis.selectPositions)
            } else if (othis.userType === 'user') {
              othis.userData.forEach(function (item) {
                othis.selectedUsers.push({id: item.id, label: item.name})
              })
              othis.$refs.tree3.setCheckedNodes(othis.selectedUsers)
            }
          }, 500)
        }
      }).catch(e => {
        this.handleError(e)
      })
    },
    deleteUser (user) {
      this.selectedUsers.splice(this.selectedUsers.indexOf(user), 1)
      this.$refs.tree3.setCheckedNodes(this.selectedUsers)
    },
    selectChange (data, selected) {
      if (this.selectType === 'depart') {
        this.selectDeparts = selected.checkedNodes
      } else if (this.selectType === 'posi') {
        this.selectPositions = selected.checkedNodes
      } else if (this.selectType === 'user') {
        this.selectedUsers = []
        var othis = this
        selected.checkedNodes.forEach(function (item) {
          if (item.type === '1') {
            othis.selectedUsers.push(item)
          }
        })
      }
    },
    saveRoleUsers () {
      var othis = this
      var data = []
      if (this.selectType === 'depart') {
        data = this.selectDeparts
      } else if (this.selectType === 'posi') {
        data = this.selectPositions
      } else if (this.selectType === 'user') {
        data = this.selectedUsers
      }// saveviews
      this.$axios({
        url: `${this.medEventApi}/api/saveviews?t=` + this.t + '&type=' + this.selectType + '&tid=' + this.$route.query.id,
        method: 'post',
        data: JSON.stringify(data)
      }).then(res => {
        if (res.status === 200) {
          this.showSucc('保存成功')
          this.selectDeparts = []
          this.selectPositions = []
          this.selectedUsers = []
        }
        othis.$emit('refresh', res.data)
      }).catch(e => {
        this.handleError(e)
      })
      // this.$emit("cancel")
    },
    typeChange (val) {
      if (val === 'posi') {
        this.$refs.tree1.setCheckedNodes(this.selectPositions)
      } else if (val === 'depart') {
        this.$refs.tree2.setCheckedNodes(this.selectDeparts)
      } else if (val === 'user') {
        this.$refs.tree3.setCheckedNodes(this.selectedUsers)
      }
    },
    deletePosition (user) {
      this.selectPositions.splice(this.selectPositions.indexOf(user), 1)
      this.$refs.tree1.setCheckedNodes(this.selectPositions)
    },
    deleteDepart (user) {
      this.selectDeparts.splice(this.selectDeparts.indexOf(user), 1)
      this.$refs.tree2.setCheckedNodes(this.selectDeparts)
    }
  }
}
</script>

<style lang="stylus" scoped>
    .bt-delete >>> .el-button
      position relative
      height 30px
      line-height 0
    .bt-delete >>> .el-icon-circle-close:before
      position absolute
      top 8px
    .username {
        line-height: 30px;
        color: #409EFF;
        cursor: pointer;
    }

    .el-checkbox:nth-child(1) {
        margin-left: 10px;
    }

    .icon {
        width: 10px;
    }
    .selector
    {
        margin-bottom 45px
        max-height 328px
    }
    .chose-user {
        display: flex;
        justify-content space-around
    }

    .lefttree {
        padded_box(border-box, 15px 0)
        scroll()
        max-width 280px;
        height 328px
        border:1px solid rgba(204,204,204,1)
        border-radius 4px
        flex: 0 0 50%;
    }
    .el-button--text {
        color: #ccc;
    }

    .bt-delete {
        opacity: 0;
        float: right;
    }

    .user-item {
        display: flex;
        height 30px
        line-height 30px
    }
    .user-item:hover {
      .bt-delete {
        opacity: 1;
      }
    }
    .username {
        flex: 1;
    }

    .rightcontent {
        padded_box(border-box, 15px 0)
        scroll()
        max-width 280px
        height 328px
        flex: 0 0 50%;
        border:1px solid rgba(204,204,204,1)
        border-radius 4px
    }

    .bt-delete {
        flex: 0 0 20px;
    }
    .lefttree::-webkit-scrollbar, .rightcontent::-webkit-scrollbar {
        width 6px    /*高宽分别对应横竖滚动条的尺寸*/
        height 6px
    }
    .lefttree::-webkit-scrollbar-thumb, .rightcontent::-webkit-scrollbar-thumb /*滚动条里面小方块*/
      border-radius 3px
      -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2);
      background rgba(0, 0, 0, 0.25)
    .center-wrapper
      columnCenter()
      color #888888
      .iconfont + .iconfont
        transform rotate(-180deg)
        margin-top 20px
    .no-wrap
      display block
      max-width 209px
      no-wrap()
</style>
